<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../libs/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="root">
			<h1 v-if="status == 1">Vue is awesome!</h1>
			<h1 v-else>😢😢😢😢😢</h1>
			<div v-if="randomNumber > 0.5">
			  渲染{{randomNumber}} > 0.5
			</div>     
			<div v-else>
			  渲染Else {{randomNumber}} <0.5  
			</div> 
			<div v-if="type === 'A'">
			  A
			</div>
			<div v-else-if="type === 'B'">
			  B
			</div>
			<div v-else-if="type === 'C'">
			  C
			</div>
			<div v-else>
				11111111
			</div>
			<!--v-show 不能和 v-else配合使用-->
			<div v-show="type==='C'">
			  Not A/B/C 
			</div>
			
			<template v-if="loginType === 'username'"> 
			  <label>Username</label>
			  <input placeholder="Enter your username" key="username-input">
			</template>
			<template v-else>
			  <label>Email</label>
			  <input placeholder="Enter your email address" key="email-input">
			</template>
			<button @click="toggleType">Toggle login type</button>
			
			
		</div>
		<script> 
			var vm = new Vue({
				el:'#root',
				data:{ 
					status:2,
					type:'C',
					randomNumber:Math.random(),
					loginType:'username'
				},
				methods:{
					toggleType:function(){
						this.loginType = this.loginType === 'username' ?'account':'username';
					}
				}
			});
			
		</script>
	</body>
</html>
